<template>
    <div>
        <div class="add_input_sty">
            <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
                <template slot="prepend">ROLE_</template>
            </el-input>
            <el-input size="small" placeholder="请输入角色中文名"  v-model="role.nameZh" @keydown.enter.native="addRole">
            </el-input>
            <el-button size="small" type="primary" icon="el-icon-plus" @click="addRole">添加</el-button>
        </div>
        <div class="role_list_sty">
            <el-collapse v-model="activeName" accordion @change="change">
                <!--需要展示所有角色 -->
                <!--当activeName=name的值的时候,当前的面板展开-->
                <el-collapse-item :title="role.nameZh" :name="role.id" v-for="(role,index) in roles" :key="index">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>可访问的资源</span>
                            <el-button style="float: right; padding: 3px 0;color: #ff0000" type="text"
                                       icon="el-icon-delete" @click="deleteRoleById(role)">
                            </el-button>
                        </div>
                        <div>
                            <!--1:查询所有的菜单展示,2:根据角色默认选中拥有的菜单-->
                            <el-tree
                                    node-key="id"
                                    :default-checked-keys="selectedNode"
                                    :data="allMenu"
                                    :props="defaultProps"
                                    :key="index"
                                    ref="tree"
                                    show-checkbox>
                            </el-tree>
                            <div class="operation_but_sty">
                                <el-button size="small" @click="cancelUpdate">取消更改</el-button>
                                <el-button size="small" type="primary" @click="doUpdatePower(role.id,index)">确认更改</el-button>
                            </div>

                        </div>
                    </el-card>
                </el-collapse-item>
            </el-collapse>
        </div>
        遗留问题:
            2:删除时候关联表问题
    </div>
</template>

<script>
    export default {
        name: "deptManager",
        data(){
            return{
                role:{
                    name:'',
                    nameZh:'',
                },
                activeName:'',
                roles:[],
                allMenu:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                selectedNode:[]
            }
        },
        mounted() {
            this.initPower()
        },
        methods:{
            // 获取所有的菜单
            getMenu(){
              this.getRequest("/system/basic/power/menus").then(resp=>{
                  if(resp){
                      this.allMenu=resp.data;
                  }
              })
            },
            // 根据角色id查询此角色可访问的菜单id
            defaultSelectMenu(rid){
                this.getRequest("/system/basic/power/getMenuIdByRid/"+rid).then(resp=>{
                    if(resp){
                        this.selectedNode=resp.data;
                    }
                })
            },
            // 获取所有的角色
            initPower(){
              this.getRequest("/system/basic/power/").then(resp=>{
                  if (resp){
                      this.roles=resp.data;
                  }
              })
            },
            // 手风琴列表展开触发的事件
            change(rid){
                if(rid){
                    this.getMenu();
                    this.defaultSelectMenu(rid)
                }
            },
            // 修改改该角色的权限
            // rid 角色id
            // index 点击按钮所在的index
            doUpdatePower(rid,index){
                // 获取点击修改按钮所在的tree
                let tree = this.$refs.tree[index];
                // 添加true参数是只获取选中的叶子节点的key
                let selectedKeys = tree.getCheckedKeys(true);
                let url = "/system/basic/power/?rid="+rid;
                selectedKeys.forEach(item=>{
                    url+="&mIds="+item
                });
                this.putRequest(url).then(resp=>{
                    if(resp){
                        this.initPower();
                        // 关闭折叠面板
                        this.activeName='';
                    }
                })
            },
            // 取消修改
            cancelUpdate(){
                this.activeName='';
            },
            //添加角色
            addRole(){
              if(this.role.name && this.role.nameZh){
                  this.postRequest("/system/basic/power/",this.role).then(resp=>{
                      if(resp){
                          // 重新加载roles
                          this.initPower();
                          // 将表单数据清空
                          this.role.nameZh='';
                          this.role.name='';
                      }
                  })
              }else {
                  this.$message.error("添加时不能有空字段")
              }
            },
            // 删除角色
            deleteRoleById(role){
                this.$confirm('此操作将永久删除['+role.nameZh+']角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/power/"+role.id).then(resp=>{
                        if(resp){
                            this.initPower();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        }

    }
</script>

<style>
    .add_input_sty .el-input{
        width: 280px;
        margin-right: 10px;
    }
    .add_input_sty{
        display: flex;
    }
    .role_list_sty{
        width: 650px;
        margin-top: 10px;
    }
    .operation_but_sty{
        margin-top: 8px;
        display: flex;
        justify-content: flex-end;
    }

</style>